<!-- echart 折线图 -->
<template>
  <div id="echartsHorizontalBar" ref="echartsHorizontalBar" class="box" />
</template>

<script>
import echarts from 'echarts';
import { mapGetters } from 'vuex';
import variables from '@/styles/black/variables.scss';
export default {
  name: '',
  components: {},
  props: {
    list: {
      type: Array,
      default: () => {},
    },
    echartsData: {
      type: Object,
      default: () => {
        // xData1: [],
        // xData2: [],
        // yData: [],
        // unit: '万元'
      },
    },
  },
  data() {
    return {
      echarts1: null,
      name: [],
    };
  },
  computed: {
    // 监听store中数据变化
    ...mapGetters(['isCollapse']),
    menuIsCollapse() {
      return this.isCollapse;
    },
  },
  watch: {
    menuIsCollapse: {
      handler(newValue, oldValue) {
        console.log('echart watch isCollapse', newValue, oldValue);
        this.getData();
      },
      deep: true,
    },
    echartsData: {
      handler: function (newValue, oldValue) {
        this.getData();
      },
      deep: true,
      // immediate: true
    },
  },
  created() {},
  mounted() {
    this.getData();
    window.onresize = () => {
      this.getData();
    };
    window.addEventListener('resize', () => {
      this.getData();
    });
  },
  activated() {
    this.getData();
  },
  beforeDestroy() {
    if (this.echarts1) {
      this.echarts1.clear();
    }
  },
  destroyed() {
    if (this.echarts1) {
      this.echarts1.dispose();
    }
  },
  // deactivated() {
  //   console.log("deactivated页面关闭时触发");
  // },
  methods: {
    getData() {
      const options = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: variables.tooptipBgColor,
        },
        title: {
          show: false,
          text: '',
        },

        // toolbox: {
        //   show: true,
        //   top: 10,
        //   right: 20,
        //   showTitle: false,
        //   iconStyle: {
        //     borderColor: variables.iconColor,
        //   },
        //   feature: {
        //     saveAsImage: {
        //       show: true,
        //       excludeComponents: ["toolbox"],
        //       pixelRatio: 2,
        //       backgroundColor: variables.linehightColor,
        //     },
        //   },
        // },
        calculable: true,
        animation: true,
        legend: {
          type: 'scroll',
          orient: 'horizontal',
          width: 300,
          data: [],
          formatter: function (name) {
            return name;
          },
          selected: {},
          itemGap: 10,
          itemWidth: 14,
          itemHeight: 14,
          right: 20,
          top: 15,
          icon: 'rect',
          textStyle: {
            fontSize: 12,
            color: variables.textColor,
          },
        },
        grid: {
          top: '20%',
          left: '10%',
          right: '10%',
          bottom: '10%',
          // containLabel: true,
        },
        xAxis: {
          name: `(${this.echartsData.unit})`,
          nameTextStyle: {
            color: variables.textColor,
            fontSize: 14,
          },
          nameGap: 25,
          // nameLocation: "end",
          nameRotate: 30,
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            formatter: function (value, index) {
              return Number(value / 10000).toFixed(2);
            },
            lineStyle: '#E3F1FD',
          },
          nameTextStyle: {
            color: variables.textColor,
          },
          axisLabel: {
            interval: 'auto',
            textStyle: {
              color: variables.textColor, // 坐标值得具体的颜色
            },
            lineStyle: '#E3F1FD',
            formatter: function (value, index) {
              return Number(value / 10000).toFixed(2);
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: variables.borderColor,
            },
          }, // 网格线
          splitArea: { show: false }, // 保留网格区域
          axisLine: { show: false },
          axisTick: { show: false },
        },
        yAxis: {
          type: 'category',
          data: [],
          nameTextStyle: {
            color: variables.textColor,
          },
          axisLabel: {
            interval: 'auto',
            textStyle: {
              color: variables.textColor, // 坐标值得具体的颜色
            },
            lineStyle: '#E3F1FD',
          },
          splitLine: { show: false }, // 网格线
          splitArea: { show: false }, // 保留网格区域
          axisLine: { show: false },
          axisTick: { show: false },
        },
        series: [
          // {
          //   name: "2011",
          //   type: "bar",
          //   label: {
          //     show: true,
          //     position: "right",
          //     color: variables.textColor,
          //     fontWeight: 600,
          //     formatter: function(value, index) {
          //       if (value.data > 1000 || value.data < -1000) {
          //         return Number(value.data / 10000).toFixed(2) + "w";
          //       } else {
          //         return Number(value.data).toFixed(2);
          //       }
          //     },
          //   },
          //   barWidth: 10,
          //   data: [18203, 23489, 29034, 104970, 131744, 630230],
          //   itemStyle: {
          //     normal: {
          //       barBorderRadius: [5, 5, 5, 5],
          //       color: new echarts.graphic.LinearGradient(
          //         0,
          //         0,
          //         1,
          //         0,
          //         [
          //           {
          //             offset: 0,
          //             color: "#262D47", // 0% 处的颜色
          //           },
          //           {
          //             offset: 1,
          //             color: "#6497C6", // 100% 处的颜色
          //           },
          //         ],
          //         false
          //       ),
          //     },
          //   },
          // },
          // {
          //   name: "2012",
          //   type: "bar",
          //   label: {
          //     show: true,
          //     position: "right",
          //     color: variables.textColor,
          //     fontWeight: 600,
          //     formatter: function(value, index) {
          //       if (value.data > 1000 || value.data < -1000) {
          //         return value.data / 10000 + "w";
          //       } else {
          //         return value.data;
          //       }
          //     },
          //   },
          //   barWidth: 10,
          //   data: [19325, 23438, 31000, 121594, 134141, 681807],
          //   itemStyle: {
          //     normal: {
          //       barBorderRadius: [5, 5, 5, 5],
          //       color: new echarts.graphic.LinearGradient(
          //         0,
          //         0,
          //         1,
          //         0,
          //         [
          //           {
          //             offset: 0,
          //             color: "#262D47", // 0% 处的颜色
          //           },
          //           {
          //             offset: 1,
          //             color: "#6375BB", // 100% 处的颜色
          //           },
          //         ],
          //         false
          //       ),
          //     },
          //   },
          // },
        ],
      };
      options.yAxis.data = [];
      options.series = [];
      options.legend.data = [];
      options.yAxis.data = this.echartsData.yData;
      this.list.forEach((item, index) => {
        options.legend.data.push(item.name);
        options.series.push(
          this.getSeriesFormat(
            this.echartsData[item.acronym],
            item.name,
            item.color0,
            item.color1
          )
        );
      });
      const _this = this;
      options.tooltip.formatter = function (params) {
        let res1 = '';
        for (var j = 0; j < params.length; j++) {
          const res = params[j].seriesName;
          let unit = '';
          let value;
          if (_this.echartsData.unit === '万元') {
            unit = '万元';
            value = Number(params[j].value / 10000).toFixed(2);
          } else {
            value = params[j].value;
          }
          res1 += `<div class="tooptip-body">
                            <div class="tooptip-label">
                              <span class="tooptip-label-icon" style="background:linear-gradient(360deg, ${params[j].color.colorStops[0].color} 0%, ${params[j].color.colorStops[1].color} 100%);"></span>
                              <span>${res}</span>
                            </div>
                            <div>
                             <span class="tooptip-value">${value}</span>
                             <span class="tooptip-unit">${unit}</span>
                            </div>
                          </div>`;
        }
        var htmlStr = `
              <div class="tooptip-info">
                <div class="tooptip-title">${params[0].name}</div>
                <div class="tooptip-content">
                  ${res1}
                </div>
              </div>
            `;
        return htmlStr;
      };
      this.echarts1 = echarts.init(
        document.getElementById('echartsHorizontalBar')
      );
      // console.log("echarts options", this.echartsData, options);
      this.echarts1.setOption(options, true);
      setTimeout(() => {
        this.echarts1.resize();
      }, 500);
    },
    getSeriesFormat(data, name, color0, color1) {
      return {
        name: name,
        type: 'bar',
        label: {
          show: true,
          position: 'right',
          color: variables.textColor,
          fontWeight: 600,
          formatter: function (value, index) {
            return Number(value.data / 10000).toFixed(2);
          },
        },
        barWidth: 10,
        data: data,
        itemStyle: {
          normal: {
            barBorderRadius: [5, 5, 5, 5],
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: color0, // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: color1, // 100% 处的颜色
                },
              ],
              false
            ),
          },
        },
      };
    },
  },
};
</script>

<style scoped lang="scss">
// 解决echarts resize不生效问题
::v-deep.box {
  width: 100%;
  height: 100%;
  min-height: 240px;
  // 子选择器(>) :只能选择作为某元素儿子元素的元素（直接子元素），不包括孙元素、曾孙元素等等等
  & > div:first-child {
    width: 100% !important;
    height: 100% !important;
    min-height: 240px;
    canvas {
      width: 100% !important;
      height: 100% !important;
      min-height: 240px;
    }
  }
}
</style>
